<template>
  <div class="eqp-search">
    <el-row :style="{paddingBottom: 0}">
      <el-col>
        <dynForm :info-form="searchForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch">
            {{ $t("search") }}
          </el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="`${$t('modify')}`"
      width="30%">
      <el-form ref="form" :model="dateForm" :rules="rules" label-width="120px">
        <el-form-item :label="`${$t('nextPMDate')}`" prop="nextPmTime">
          <el-date-picker
            v-model="dateForm.nextPmTime"
            :placeholder="`${$t('SelectDate')}`"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="date"
          />
        </el-form-item>

      </el-form>
      <span slot="footer">
        <el-button type="primary" icon="el-icon-receiving" @click="doSave">{{
          $t("save")
        }}</el-button>
        <el-button icon="el-icon-delete" @click="resetForm">{{
          $t("reset")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import { betterTips } from '@/utils/notification'
import eqpSearchApi from '@/api/maintenance/eqpSearch'
import eqpbaseApi from '@/api/equipment/eqpbase'
export default {
  name: 'EqpSearch',
  components: {},
  mixins: [mySetting],
  data() {
    return {
      searchForm: {},
      searchTags: [
        { label: this.$t('MaintenancePlanName'), prop: 'pmScheduleName', tag: 'DynInput' },
        { label: this.$t('eqpName'), prop: 'EqpName', tag: 'DynSelect' },
        { label: this.$t('nextPMDate'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.searchForm.startTime = Array.isArray(value) ? value[0] : null
          this.searchForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'eqpId', label: this.$t('eqpId') },
        { prop: 'status', label: this.$t('Maintenancetype') },
        { prop: 'nextPmTime', label: this.$t('nextPMDate') },
        { prop: '', label: this.$t('action'), templete: (_scope) => {
          return (
            <el-link type='primary' underline={false}
              on-click={() => this.scopedHandle(_scope.row)}
            > {this.$t('action')}</el-link>
          )
        } }
      ],
      dialogVisible: false,
      tableLoading: true,
      dateForm: {},
      rules: {
        nextPmTime: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('nextPMDate')}`, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initList()
    this.getEqpNameList()
  },
  methods: {
    async initList() {
      const res = await eqpSearchApi.getList(this.$clearNull({ ...this.searchForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    scopedHandle(row) {
      // 简单的浅拷贝下
      this.dateForm = Object.assign({}, this.dateForm, row)
      this.dialogVisible = true
    },
    doSave() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          const res = await eqpSearchApi.doUpdate(this.dateForm)
          betterTips(res, this.handleClose, this.doSearch)
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.dateForm = {}
    },
    resetForm() {
      this.dateForm.nextPmTime = ''
    },
    getList(val) {
      this.listQuery = val
      this.initList()
    },
    // 获取设备名称
    async getEqpNameList() {
      const res = await eqpbaseApi.getHandleList()
      this.$set(this.selectList, 'EqpName', res.data)
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
.eqp-search .el-row:nth-child(1) {
  padding-bottom: 0;
}
.el-form{
 .el-form-item{
  margin-bottom: 15px;
}
}
</style>
